<template>
  <div class="chart-header">
    <el-popover title="过滤条件" ref="chartPopover" placement="top-start" width="200" @show="showFilter"
      @hide="cancelFilter" trigger="click">
      <el-form ref="form" label-width="60px" v-if="show">
        <el-row>
          <el-col class="detect-container">
            <el-form-item label="最小值">
              <el-input-number v-model="min"></el-input-number>
            </el-form-item>
            <el-form-item label="最大值">
              <el-input-number v-model="max"></el-input-number>
            </el-form-item>
            <el-form-item label="跨度">
              <el-input-number v-model="step" :min="1"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <i class="el-icon-boe-shaixuan1" slot="reference" />
      <div style="text-align: right;padding-top: 25px;">
        <el-button type="primary" @click="filterData">确定</el-button>
        <el-button type="primary" plain @click="cancelFilter">取消</el-button>
      </div>
    </el-popover>
  </div>
</template>

<script>
import { isEmpty, intersection, cloneDeep, merge } from "lodash"

export default {
  props: {
    chartData: {
      type: Object,
      require: true,
      default: () => ({})
    },
  },
  data () {
    return {
      show: false,
      min: 0,
      max: 0,
      step: 0,
    }
  },
  methods: {
    showFilter () {
      this.show = true
    },
    cancelFilter () {
      this.show = false
      this.$refs.chartPopover.doClose()
    },
    groupIndicesByValueRange (array, min, max, step) {
      const belowMinIndices = [];
      const aboveMaxIndices = [];
      const inRangeIndices = [];

      array.forEach((value, index) => {
        if (value < min) {
          belowMinIndices.push(index);
        } else if (value > max) {
          aboveMaxIndices.push(index);
        } else {
          inRangeIndices.push(index);
        }
      });

      const inRangeGroups = [];
      for (let i = 0; i < inRangeIndices.length; i += step) {
        const group = inRangeIndices.slice(i, i + step);
        inRangeGroups.push(group);
      }

      const result = [];
      if (belowMinIndices.length > 0) {
        result.push(belowMinIndices);
      }
      result.push(...inRangeGroups);
      if (aboveMaxIndices.length > 0) {
        result.push(aboveMaxIndices);
      }

      return result;
    },
    groupEChartsData (originalData, min, max, step) {
      // 转换X轴数据为数字
      const xData = originalData.xAxis[0].data.map(Number);

      // 创建分组区间
      const groups = [];
      const groupsIndex = this.groupIndicesByValueRange(xData, min, max, step)

      groupsIndex.forEach((i) => {
        const j = i[i.length-1]
        groups.push({
          label: `${xData[j]}`,
          indices: i  // 存储属于该组的原始数据索引
        });
      });

      // 处理series数据
      const newSeries = originalData.series.map(seriesItem => {
        // 初始化新series的数据数组
        const newData = [];

        // 对每个分组内的数据求和
        groups.forEach((group, groupIndex) => {
          let sum = [];
          group.indices.forEach(dataIndex => {
            // 处理原始数据中可能为null的情况
            const value = seriesItem.data[dataIndex];
            if (value !== null && value !== undefined) {
              sum.length === 0 ? sum = value : sum.map((v, i) => v + value[i]);
            }
          });
          newData.push([groupIndex, ...sum.slice(1)]);
        });

        return {
          ...seriesItem,
          data: newData
        };
      });

      // 创建新的X轴数据
      const newXAxis = [{
        ...originalData.xAxis[0],
        data: groups.map(group => group.label)
      }];

      return {
        ...originalData,
        xAxis: newXAxis,
        series: newSeries
      };
    },
    filterData () {
      const tempData = cloneDeep(this.chartData)
      const data = this.groupEChartsData(tempData.option, this.min, this.max, this.step)
      tempData.option = data
      this.$emit('setChartOption', tempData)
    }
  },
}
</script>

<style scoped lang="stylus">
.chart-header
  width 90%;
  position: absolute;
  top: 50px;
  left: 40px;
  z-index: 99;

  .el-icon-boe-shaixuan1
    font-size: 30px;
    position: absolute;
    top: -55px;
    right: 20px;
    cursor: pointer;
    z-index: 99;
</style>
